import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react'
import echarts from 'echarts'
import { Col, Row } from 'antd'
import _ from 'lodash'

import { getDiffTypeArticleInfo, getNearWeekVisitor } from '@/services/admin'

const pieOption = {
  title: {
    text: '文章类型',
    left: 'left',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b} : {c}篇 ( {d}% )',
  },
  series: [
    {
      name: '文章类型',
      type: 'pie',
      radius: [20, 140],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 20,
      },
      data: [],
    },
  ],
}
const lineOption = {
  color: ['skyblue'],
  title: {
    text: '近七日访客数',
    left: 'left',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  xAxis: {
    type: 'category',
    boundaryGap: ['2%', 0],
    data: [],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '访客数',
      type: 'line',
      smooth: true,
      data: [],
      label: {
        normal: {
          show: true,
          position: 'top',
          color: 'blue',
        },
      },
    },
  ],
}

export default class index extends Component {
  componentDidMount() {
    this.getDiffTypeArticleInfo()
    this.getNearWeekVisitor()

    document.title = '工作台'
  }
  // 获取不同类型文章信息
  getDiffTypeArticleInfo = async () => {
    const res = await getDiffTypeArticleInfo()
    if (res.status === 200) {
      const seriesDataArr = []
      res.data.forEach((item) => {
        seriesDataArr.push({ value: item.amount, name: item.tag_name })
      })
      pieOption.series[0].data = seriesDataArr
      const instance = this.pieEchart.getEchartsInstance()
      instance.setOption(pieOption)
    }
  }

  // 获取近七日文章访问数量
  getNearWeekVisitor = async () => {
    const res = await getNearWeekVisitor()
    if (res.status === 200) {
      const seriesArr = []
      const xAxisArr = []
      res.data.forEach((item) => {
        const arr = item.visitTime.split('-')
        xAxisArr.push(arr[1] + '-' + arr[2])
        seriesArr.push(item.amount)
      })
      lineOption.xAxis.data = xAxisArr
      lineOption.series[0].data = seriesArr
      const instance = this.lineEchart.getEchartsInstance()
      instance.setOption(lineOption)
    }
  }
  render() {
    return (
      <div>
        <Row className="article-info" style={{ padding: '0 30px 0 10px' }}>
          <Col span={12}>
            <ReactEcharts ref={(e) => (this.pieEchart = e)} option={pieOption} notMerge={true} />
          </Col>
          <Col span={12}>
            <ReactEcharts ref={(e) => (this.lineEchart = e)} option={lineOption} notMerge={true} />
          </Col>
        </Row>
      </div>
    )
  }
}
